<template>
	<el-container class="bg-page">
		<el-header style="height: 150px;">
			<el-carousel height="150px">
				<el-carousel-item v-for="item in img_list" :key="item">
					<img :src="item" style="height: 150px;">
				</el-carousel-item>
			</el-carousel>
			<span v-if=" user.role">欢迎回来:{{user.name}}  角色：{{ user.role.name }}</span>
		</el-header>
		<el-main>

			<el-row :gutter="24" class="card_block">
				<el-col :span="8" style="padding: 10pt;" v-for="item in home_dates">
					<div>
						<el-row>
							<h2>
								{{ item.value }}
							</h2>
						</el-row>
						<el-row>
							{{ item.title }}
						</el-row>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="24" class="card_block">
				<el-row :gutter="24" style="text-align: left;">
					<el-col :span="24">
						<h3>主要功能</h3>
					</el-col>
				</el-row>

				<el-row :gutter="24">
					<el-col :span="8" style="padding: 5pt;	display:flex; flex-direction: column; justify-content: center; align-items: center;" v-for="(item,index) in tool_list">
						<div class="icon-button" @click="onClickTools(item.url, item.type,index)">
							<el-row>
								<i :class="item.icon"></i>
							</el-row>
							<el-row>
								{{ item.title }}
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-row>




			<el-row :gutter="24" class="card_block">
				<el-row :gutter="24" style="text-align: left;">
					<el-col :span="24">
						<h3>数据统计</h3>
					</el-col>
				</el-row>


				<el-row :gutter="24">
					<el-col :span="8" v-for="item in date_list" style="padding: 5pt;	display:flex; flex-direction: column; justify-content: center; align-items: center;" >
						<div class="icon-button">
							<el-row>
								<i :class="item.icon"></i>
							</el-row>
							<el-row>
								{{ item.title }}
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-row>
		</el-main>

	</el-container>
</template>

<script>
import Api from '../../../api/api';
export default {
	data() {
		return {
			user:{},
			img_list: [
				"/static/img/bg1.jpg",
				"/static/img/bg2.jpg",
				"/static/img/bg3.jpg",
			],
			home_dates: [],
			tool_list: [
				//enum(//0待指派 1待接单 2待完成 3已完成 4未完成)	工单状态 
				{
					title: '报修',
					icon: 'el-icon-edit',
					url: '/pages/postorder/postorder',
					type: 1
				},
				{
					title: '待指派',
					icon: 'el-icon-s-promotion',
					url: '/pages/tabbar/orders/orders?status=0',
					type: 1
				},
				{
					title: '待接单',
					icon: 'el-icon-s-order',
					url: '/pages/tabbar/orders/orders?status=1',
					type: 1
				},
				{
					title: '维修中',
					icon: 'el-icon-s-cooperation',
					url: '/pages/tabbar/orders/orders?status=2',
					type: 1
				},
				{
					title: '人员管理',
					icon: 'el-icon-s-custom',
					url: '/pages/personmanager/personmanager',
					type: 1
				},
				{
					title: '物料管理',
					icon: 'el-icon-s-shop',
					url: '/pages/materialmanager/materialmanager',
					type: 1
				},
				{
					title: '客户管理',
					icon: 'el-icon-s-shop',
					url: '/pages/customermanager/customermanager',
					type: 1
				},
				{
					title: 'Gel卡管理',
					icon: 'el-icon-s-shop',
					url: '/pages/gelcardmanager/gelcardmanager',
					type: 1
				},
				{
					title: '角色管理',
					icon: 'el-icon-s-shop',
					url: '/pages/rolemanager/rolemanager',
					type: 1
				}
			],
			date_list: [{
				title: '维修看板',
				icon: 'el-icon-edit'
			},
			{
				title: '知识库',
				icon: 'el-icon-s-promotion'
			}
			],
			title: 'Hello'
		};
	},
	methods: {
		onLoad() {
			this.user = this.$Global.user
			Api.getHomepageStatistics().then(response => {
				if(response.status==200)
				{
					this.home_dates = response.data.data
				}
				console.log(response.data.data)
			})
		},
		onClickTools(url, type,index) {
			let role_permission = this.user.role?this.user.role.role_permission:0xffffff;
			if((role_permission&(0x800000>>index))!=0)
			{
				console.log(url, type,index)
				if (type == 0) {
					uni.reLaunch({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}else{
				this.$message.success("权限不足")
			}
		}
	}
};
</script>

<style>
.content {
	text-align: center;
	height: 100%;
}

.card_block {
	text-align: center;
	background-color: white;
	margin-top: 10pt;
	border-radius: 10px;
}

.el-col {
	border-radius: 4px;
}

.bg-purple-dark {
	background: #99a9bf;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

.icon-button {
	background-color: white;
	border-radius: 4px;
	padding: 5pt;
	display:flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center;
	width: 50pt;
}

.bg-page {
	text-align: center;
	background: #f5f5f5;
	padding: 0px;
	margin: 0px;
	height: 90vh;
}
</style>
